<template>
  <el-scrollbar max-height="700px">
    <el-card shadow="never">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="规格设置" name="model">
          <setting-table :setting="activeName" />
        </el-tab-pane>
        <el-tab-pane label="包装设置" name="pack">
          <setting-table :setting="activeName" />
        </el-tab-pane>
        <el-tab-pane label="仓库设置" name="warehouse">
          <setting-table :setting="activeName" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-scrollbar>
</template>

<script setup>
import { ref } from 'vue'
import settingTable from './settingTable.vue'

const activeName = ref('model')
// const tableData = ref('model')
const handleClick = (tab) => {
  activeName.value = tab.props.name
  console.log(activeName.value)
}
</script>
<style lang="scss" scoped>
.setting-wrapper {
  border-bottom: solid 0.1rem var(--el-color-info-light-5);
  padding-bottom: 2rem;
}
.setting-table {
  margin-top: 0.5rem;
}
.setting-gap {
  height: 2rem;
}
</style>
